<template>

  <el-row>
    <el-tabs tab-position="left"  style="padding-top: 20px">
      <el-tab-pane label="">说明:建议选择创建时机(创建、完成)。</el-tab-pane>
    </el-tabs>
    <div style="display: block;margin-left: 33px" class="main-div">
      <div style="padding-top: 10px;margin-left: 45px">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="primary" @click="go"> <Icon type="md-close" />关闭</el-button>
      </div>
      <div style="margin-top: 20px;margin-left: 35px">
        <el-form ref="batchForm" :model="batchForm" label-width="80px" style="display: block">
          <el-form-item label="批量设置" prop="type">
            <el-checkbox-group v-model="batchForm.type">
              <el-checkbox label="emailCreated" name="type" @change="chooseBatch('emailCreated')">前置邮件通知</el-checkbox>
              <el-checkbox label="emailCompleted" name="type" @change="chooseBatch('emailCompleted')">后置邮件通知</el-checkbox>
              <el-checkbox label="msgCreated" name="type" @change="chooseBatch('msgCreated')">前置短信通知</el-checkbox>
              <el-checkbox label="msgCompleted" name="type" @change="chooseBatch('msgCompleted')">后置短信通知</el-checkbox>
              <el-checkbox label="created" name="type" @change="chooseBatch('created')"> 开启前置事件</el-checkbox>
              <el-checkbox label="completed" name="type" @change="chooseBatch('completed')">开启后置事件</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>

    </div>

    <div style="display: block;" class="main-div">
      <el-form ref="addForm" :model="addForm" label-width="120px" style="display: block">

        <el-col :span="8" v-for="(item,index) in tableData" :key="index">
          <Card style="margin-left: 20px;margin-bottom: 10px">
            <p slot="title">{{item.name}}</p>
            <el-tabs v-model="item.activeName" >
              <el-tab-pane label="前置事件" name="created">
                <el-form-item label="发送时机">
                  <el-checkbox-group v-model="item.eventTypes">
                    <el-checkbox label="created" name="type">创建</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="邮件通知" :prop="tableData[index].emailCreated.toString()">
                  <el-switch v-model="item.emailCreated"></el-switch>
                </el-form-item>
                <el-form-item v-if="item.emailCreatedContent" label="邮件模板" :prop="tableData[index].emailCreatedContent">
                  <el-input type="textarea" v-model="item.emailCreatedContent" ></el-input>
                </el-form-item>
                <el-form-item label="短信通知" :prop="tableData[index].msgCreated.toString()">
                  <el-switch v-model="item.msgCreated"></el-switch>
                </el-form-item>
                <el-form-item v-if="item.msgCreatedContent" label="短信模板" :prop="tableData[index].msgCreatedContent">
                  <el-input type="textarea" v-model="item.msgCreatedContent" ></el-input>
                </el-form-item>
                <el-form-item label="抄送人">

                  <el-button
                    v-for="(item,nodeIndex) in item.userCreatedNotify"
                    type="danger"
                    style="margin-left: 2px"
                    color="primary"
                    @click="delCommonUsers(nodeIndex)"
                  >
                    {{ item.fullname }} &nbsp;<Icon type="md-close" />
                  </el-button>
                  <el-button type="primary" @click="selectAddSignUsers(index)">
                    <Icon type="ios-contact" />
                    设置抄送人
                  </el-button>

                </el-form-item>

              </el-tab-pane>
              <el-tab-pane label="后置事件" name="completed">
                <el-form-item label="发送时机">
                  <el-checkbox-group v-model="item.eventTypes">
                    <el-checkbox label="completed" name="type">完成</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item label="邮件通知" :prop="tableData[index].emailCompleted.toString()">
                  <el-switch v-model="item.emailCompleted"></el-switch>
                </el-form-item>
                <el-form-item v-if="item.emailCompletedContent" label="邮件模板" :prop="tableData[index].emailCompletedContent">
                  <el-input type="textarea" v-model="item.emailCompletedContent" ></el-input>
                </el-form-item>

                <el-form-item label="短信通知" :prop="tableData[index].msgCompleted.toString()">
                  <el-switch v-model="item.msgCompleted"></el-switch>
                </el-form-item>
                <el-form-item v-if="item.msgCompletedContent" label="短信模板" :prop="tableData[index].msgCompletedContent">
                  <el-input type="textarea" v-model="item.msgCompletedContent" ></el-input>
                </el-form-item>
                <el-form-item label="抄送人">

                  <el-button
                    v-for="(item,nodeIndex) in item.userCompletedNotify"
                    type="danger"
                    style="margin-left: 2px"
                    color="primary"
                    @click="delCommonUsers(nodeIndex)"
                  >
                    {{ item.fullname }} &nbsp;<Icon type="md-close" />
                  </el-button>
                  <el-button type="primary" @click="selectAddSignUsers(index)">
                    <Icon type="ios-contact" />
                    设置抄送人
                  </el-button>

                </el-form-item>
              </el-tab-pane>
            </el-tabs>



          </Card>
        </el-col>

        <user-multiple-dialog
          :on-ok="confirmDialogEvent"
          :show.sync="show"
          :exist-data="existData"
          :node-index="index"
          :alias="alias"
        />
      </el-form>


    </div>


  </el-row>


</template>

<script>
  import {getAllActivity, saveModelBus} from "@/api/busModel";
  import Uediter from '@/views/ueditor/'
  import {getMessageTemplateTask} from "@/api/analy";
  import userMultipleDialog from '@/views/components/org/userMultipleDialog'

  export default {
    name: 'Task',
    components: {Uediter,userMultipleDialog},
    data() {

      return {
        ueditor: {
          value: '',          //编辑器默认内容
          config: {           //设置编辑器宽高
            initialFrameWidth: null,
            initialFrameHeight: 350
          }
        },
        addModel: false,
        alias: 'agree',
        addForm: {
          id: "",
          nodeName: "",
          emailContent: "",
        },
        batchForm: {
          id: "",
          type: [],
          emailContent: "",
        },
        tableData: [],
        msgData: [],
        tableHeight: 450,
        queryDate: [],
        total: 0,
        chartVisible: false,
        forbiddenSwitch: false,
        modal_loading: false,
        msgModal: false,
        show: false,
        index: 0,
        existData: []
      }
    },
    mount() {

    },
    created() {
      // this.getData()
      var query = this.$route.query;
      this.addForm.id = query.id;
      if (query.id) {
        //初始化数据
        this.getAllActivity(query.id)

      }
    },
    methods: {
      confirmDialogEvent: function(data) {
        //activeName
       var node=  this.tableData[this.index]
        if(node.activeName=='created'){
          this.tableData[this.index].userCreatedNotify=data
          this.existData=this.tableData[this.index].userCreatedNotify
        }else{
          this.tableData[this.index].userCompletedNotify=data
        }
        this.show=false
      },
      delCommonUsers: function(index) {
        var node=  this.tableData[this.index]
        if(node.activeName=='created') {
          node.userCreatedNotify.splice(index, 1)
        }
        this.existData.splice(index, 1)
      },
      selectAddSignUsers:function(index){
        this.index=index
        try {
          var node=  this.tableData[this.index]
          if(node.activeName=='created'){
            this.existData=node.userCreatedNotify
          }else{
            this.existData=node.userCompletedNotify
          }
        }catch (e) {
          this.existData=[]
        }
        this.show = true
      },
      onSubmit: function () {
      },
      chooseBatch: function (type) {
        var flag = false;
        var exist = this.batchForm.type;
        if (exist.length == 0) {
          console.log("取消选中");

        } else {
          if (exist.includes(type)) {
            console.log("选中");
            flag = true;

          } else {
            console.log("取消选中");
          }
        }
        this.tableData.forEach((item, index, array) => {
          //执行代码
          if (type == 'emailCreated') {
            item['emailCreated'] = flag
          }
          if (type == 'emailCompleted') {
            item['emailCompleted'] = flag
          }
          if (type == 'msgCreated') {
            item['msgCreated'] = flag
          }
          if (type == 'msgCompleted') {
            item['msgCompleted'] = flag
          }
          if (type == 'created') {
            if (flag) {
              item['eventTypes'].push('created')
            } else {
              var index = item['eventTypes'].indexOf('created');
              if (index > -1) {
                item['eventTypes'].splice(index, 1);
              }
            }
          }
          if (type == 'completed') {
            if (flag) {
              item['eventTypes'].push('completed')
            } else {
              var index = item['eventTypes'].indexOf('completed');
              if (index > -1) {
                item['eventTypes'].splice(index, 1);
              }
            }
          }
        })


      },
      getAllActivity: function (id) {
        getAllActivity(id).then((response2) => {
          if (response2.code == 0) {
            var data = response2.data;
            this.tableData = data;
          }
        })


      },
      go: function () {
        this.$router.go(-1)
      },
      close: function () {
        this.$store.dispatch('tagsView/delView', this.$route)
// 返回上一步路由
        this.$router.go(-1)
      },
      save: function () {
        saveModelBus(this.addForm.id,this.tableData).then((response2) => {
          if (response2.code == 0) {
            this.$message({"duration":'800',message:'保存成功',type:'success',customClass:'zZindex'});
            this.close();
          }
        })
      },

    }

  }

</script>
<style lang="scss" scoped>
  .task-card {
    margin-top: 10px;
  }

  .input_w {
    width: 40% !important;
  }

  .task-card {
    margin-top: 10px;
  }

  .item {
    display: block;
    margin-top: 20px;
    box-shadow: 0 0 20px 0 rgba(204, 207, 227, .45);
    margin-bottom: 10px;

  }

  .left {
    font-size: 16px;
    color: #575757;
  }

  img {
    width: 60px;
    height: 60px;
  }

</style>
